// 语法：addEventListener(element, type, fn, selector)
// 说明：如果selector没有，直接给element绑定事件，
// 如果selector有，将selector对应的多个元素的事件委托绑定给父元素element

/**
 * * 事件委托函数封装
 * @param {*} el 父元素选择器
 * @param {*} type 事件类型
 * @param {*} fn 回调函数
 * @param {*} selector 子元素选择器
 */
export function addEventListener(el, type, fn, selector) {
  // 判断el的类型
  if (typeof el === 'string') {
    el = document.querySelector(el);
  }
  // 事件绑定
  // 若没有传递子元素的选择器，则给 el 元素绑定事件
  if (!selector) {
    el.addEventListener(type, fn);
  } else {
    el.addEventListener(type, function(e) {
      // 获取点击的目标的事件源
      const target = e.target;
      // 判断选择器与目标元素是否相符合
      // matches() 方法，判断元素是否一致，返回 Boolean值
      if (target.matches(selector)) {
        // 若符合，则调用回调，将this指向事件源 target，传入事件对象e
        fn.call(target, e);
      }
    })
  }

}